<template>
  <div style="height: 100%">
    <g-dynamic-table
      type="user"
      ref="table"
      class="table"
      :fetch="fetchDataList"
      :showActionBtn="showActionBtn"
      :showExport="true"
      :exportConfig="{
        formartColumn: formartColumn,
      }"
      @action-click="handleActionClick"
    >
      <template #headerCell="{ column }">
        <template v-if="column.field == 'No'">
          {{ column.title }}
        </template>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'roles'">
          <template v-if="record[column.field].length > 0">
            <a-tooltip :title="rolesEllipsis(record.roles)">
              <span>{{ rolesEllipsis(record.roles) }} </span>
            </a-tooltip>
          </template>
          <span v-else></span>
        </template>

        <!-- 邮箱是否已验证 -->
        <template v-if="column.key === 'isEmailConfirmed'">
          <a class="isEmailConfirmed">
            <CheckCircleTwoTone v-if="record.isEmailConfirmed" twoToneColor="#50CD89" />
            <CloseCircleTwoTone v-if="!record.isEmailConfirmed" twoToneColor="#F2416C" />
          </a>
        </template>

        <!-- 是否已激活 -->
        <template v-if="column.key === 'isActive'">
          <a class="isActive">
            <CheckCircleTwoTone v-if="record.isActive" twoToneColor="#50CD89" />
            <CloseCircleTwoTone v-if="!record.isActive" twoToneColor="#F2416C" />
          </a>
        </template>
      </template>
    </g-dynamic-table>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import GDynamicTable from '/@/shared/components/g-dynamic-table/index.vue';

  import User from './user';

  export default defineComponent({
    components: {
      GDynamicTable,
    },
    mixins: [User],
    name: 'users-news',
  });
</script>

<style scoped lang="less">
  // .table {
  //   :deep(.custom) {
  //     color: pink;
  //   }
  // }
</style>
